import React from 'react';//核心库
import ReactDOM from 'react-dom';//DOM渲染库
/**
 * 把h1元素渲染到root节点的内部
 * 看起来像html ,但是它其实是JS,它并不是标准的JS语法，
 * 在webpack打包的时候，会把这种JSX语法转成纯 的JS代码，所以在浏览器就可以运行了
 */
/**
 * 什么叫React元素
 * 是React应用的最小单位 ,它描述了你在屏幕上看到的内容
 * React元素的本质是一个普通 的JS对象，
 * ReactDOM会保证浏览器中的DOM和你的React元素一致
 */
let name = "zhufeng";
//jsx更像JS而非HTML
//React如何区分是jsx元素还是表达式呢?
// < 开头的就是JSX元素 {}就是表达式 = {{}}
//给JSX赋值的时候避免使用JS关键字
//如果一个React元素属性名是class的话，如果是关键的话 for if ,要改名 for=>htmlFor
//JSX也是JS对象，
let element = <h1 id="title" className="welcome">hello {name + 2}</h1>;//jsx
/**
 * JSX表达式
 * 表达式就是变量和操作符的集合，可以计算结里
 * 1+2 
 * let a =1;
 * a+2
 * 在JSX中任意使用表达式,表达式要放在大括号里
 * 
 */

//var element = React.createElement("h1", { id: 'title' }, "hello",React.createElement("h2", null, "world"));
console.log(element);

ReactDOM.render(
  element, document.getElementById('root')
);